<template>
  <div>
    <el-tabs v-model="count" class="midiate" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="收入" name="first">
        <el-form ref="submitFormRef" :model="submitForm" label-width="80px">
          <el-form-item label="金额">
            <el-input type="number" v-model="submitForm.expend"></el-input>
          </el-form-item>
          <el-form-item label="账户">
            <el-select v-model="submitForm.account" placeholder="请选择">
              <el-option
                v-for="item in account"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用途">
            <el-cascader :options="inOptions" :show-all-levels="false" v-model="submitForm.purpose"></el-cascader>
          </el-form-item>
          <el-form-item label="日期">
            <el-col :span="11">
              <el-date-picker type="date" v-model="submitForm.date" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="submitForm.remark" placeholder="请填写备注，可以为空"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="支出" name="second">
        <el-form ref="submitFormRef" :model="submitForm" label-width="80px">
          <el-form-item label="金额">
            <el-input type="number" v-model="submitForm.expend"></el-input>
          </el-form-item>
          <el-form-item label="账户">
            <el-select v-model="submitForm.account" placeholder="请选择">
              <el-option
                v-for="item in account"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用途">
            <el-cascader
              :options="outOptions"
              :show-all-levels="false"
              v-model="submitForm.purpose"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="日期">
            <el-col :span="11">
              <el-date-picker type="date" v-model="submitForm.date" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="submitForm.remark" placeholder="请填写备注，可以为空"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
      count: "first",
      submitForm: {
        telephone: "",
        expend: 0,
        account: "",
        date: "",
        purpose: ["工资"],
        remark: ""
      },
      outOptions: "",
      inOptions: "",
      record: {},
      account: []
    };
  },
  async created() {
    this.outOptions = this.$store.state.outOptions;
    this.inOptions = this.$store.state.inOptions;
    this.submitForm.telephone = window.sessionStorage.getItem("telephone");
    this.submitForm.date = window.sessionStorage.getItem("nowDate");
    const { data: result } = await this.$http.get("record", {
      params: { telephone: window.sessionStorage.getItem("telephone") }
    });
    this.record = this.$store.state.record;
    const { data: res } = await this.$http.get("account", {
      params: { telephone: window.sessionStorage.getItem("telephone") }
    });
    this.account = res.data.data
  },
  methods: {
    // 格式化日期
    dateForm(date) {
      let d = new Date(date);
      d.setDate(d.getDate() + 0);
      let m = d.getMonth() + 1;
      return d.getFullYear() + "-" + m + "-" + d.getDate();
    },
    async onSubmit() {
      if (this.submitForm.expend <= 0) {
        this.$message({
          showClose: true,
          message: "金额不能小于0",
          type: "warning"
        });
        return;
      }
      if (this.count === "second") {
        this.submitForm.expend = 0 - this.submitForm.expend;
      }
      const { data: result } = await this.$http.put(
        "addition",
        this.submitForm
      );
      if (result.errorCode != 0) {
        this.$message({
          showClose: true,
          message: "添加失败！",
          type: "warning"
        });
        return;
      }
      this.$message({
        showClose: true,
        message: "添加成功！",
        type: "success"
      });
      this.submitForm.expend = 0;
      this.submitForm.remark = "";
      const res = await this.$http.get("record", {
        params: { telephone: window.sessionStorage.getItem("telephone") }
      });
      // 遍历获取到的数据，按时间日期渲染
      res.data.data.result.recordset.forEach(item => {
        item.date = this.dateForm(item.date);
      });
      this.record = res.data.data.result.recordset;
      this.$store.commit("setRecord", this.record);
    },
    handleClick() {
      if (this.count === "second") {
        this.submitForm.purpose = ["基本生活", "餐饮饮食"];
      } else if (this.count === "first") {
        this.submitForm.purpose = ["工资"];
      }
      this.submitForm.expend = 0;
    }
  }
};
</script>

<style lang="less" scoped>
.midiate {
  margin: 20px auto;
  width: 80%;
}
</style>